<template>
    <div>
        <!--表单设计器-->
        <v-form-designer :designer-config="DesignerConfig" ref="formDesigner">
            <!-- <template #customToolButtons>
            <el-button type="text">保存</el-button>
        </template> -->
            <!-- 自定义按钮插槽演示 -->
            <template #customToolButtons>
                <el-button type="text" @click="saveJump"><i class="el-icon-finished" />保存</el-button>
            </template>
        </v-form-designer>

        <!--弹出框-->
        <el-dialog title="提示" :visible.sync="formVisable">
            <el-form :model="FormData" :rules="rules" ref="FormData" label-width="100px" class="demo-FormData">
                <el-form-item label="表单名称" prop="Name">
                    <el-input v-model="FormData.Name"></el-input>
                </el-form-item>
                <el-form-item label="表单描述" prop="Describe">
                    <el-input v-model="FormData.Describe"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveForm('FormData')">立即创建</el-button>
                    <el-button @click="resetForm('FormData')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
import { FormQuery, FormDelete, FormUpdate, FormInsert } from '@/api/form.js'
export default {
    data() {
        return {
            //表单设计器的显示按钮设计
            DesignerConfig: {
                languageMenu: true,
                externalLink: false,
                formTemplates: true,
                widgetNameReadonly: false,
                eventCollapse: true,
                clearDesignerButton: true,
                previewFormButton: true,
                importJsonButton: true,
                exportJsonButton: true,
                exportCodeButton: true,
                generateSFCButton: false,
                toolbarMaxWidth: 420,
                toolbarMinWidth: 300,
                resetFormJson: false,
                productName: '自定义',
                productTitle: '自定义',
            },

            FormData: {
                Name: '',
                Describe: '',
                JsonFormData: '',
            },

            rules: {
                Name: [
                    { required: true, message: '请输入表单名称', trigger: 'blur' },
                ], 
                Describe: [
                    { required: true, message: '请输入表单描述', trigger: 'blur' },
                ],
            },

            formVisable: false
        }
    },
    methods: {
        //弹出添加框
        saveJump() {
            this.formVisable = true;
        },
        //提交表单信息
        saveForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //获取json对象
                    this.FormData.JsonFormData = this.$refs.formDesigner.getFormJson();
                    console.log(this.FormData);

                    FormInsert(this.FormData).then(res => {
                        if (res.Code == 200) {
                            this.$message.success(res.Message);
                            this.formVisable = true;
                            this.$router.push('/FormList')
                        } else {
                            this.$message.error(res.Message)
                        }
                    })

                    //alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        }
    },
    mounted(){
        this.$refs.formDesigner.clearDesigner();
    }
}
</script>
